<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 我是注释 -->
  我是文本
  <div class="box">我是box</div>

  <script>
    var bodyNodeChild = document.body.childNodes
    var commentNode = bodyNodeChild[1]
    var textNode = bodyNodeChild[2]
    var divNode = bodyNodeChild[3]
    console.log(commentNode, textNode, divNode)
    // 节点属性
    console.log(
      commentNode.nodeType, // 8
      textNode.nodeType, // 3
      divNode.nodeType, // 1
    )
    for (var node of bodyNodeChild) {
      if (node.nodeType === 8) { }
      else if (node.nodeType === 3) { }
      else if (node.nodeType === 1) { }
    }
    console.log(
      // 常量
      Node.COMMENT_NODE, // 8
      Node.TEXT_NODE,  // 3
      Node.ELEMENT_NODE // 1
    )

    // 节点的名称
    // nodeName
    console.log(
      commentNode.nodeName,// #comment
      textNode.nodeName,// #text
      divNode.nodeName,// DIV
    )
    // tagName只适用于元素
    console.log(
      commentNode.tagName,// undefined
      textNode.tagName,// undefined
      divNode.tagName,// 'DIV'
    )

    //data(nodeValue)/innerHTML/textContent
    // data:非元素节点获取数据
    console.log(
      "data",
      commentNode.data, //  我是注释
      textNode.data,// 我是文本
      divNode.data, // undefined
    )
    // innerHTML对应的html元素也会获取
    console.log(
      "innerHTML",
      commentNode.innerHTML, //  undefined
      textNode.innerHTML,// undefined
      divNode.innerHTML, // '我是box'
    )
    // textContent只会获取文本内容
    console.log(
      "textContent",
      commentNode.textContent, //  我是注释  
      textNode.textContent,// 我是文本
      divNode.textContent, // 我是box
    )

    //outerHTML
    console.log(
      "outerHTML",
      commentNode.outerHTML, //  undefined  
      textNode.outerHTML,// undefined
      divNode.outerHTML, // <div class="box">我是box</div>
    )

  </script>
</body>

</html>